/**
 * 申请请假组件-家长端
 * Created by xxx on 2017/7/13.
 */
'use strict';
import React, {Component} from 'react'
import {Link} from 'react-router'
import {hashHistory} from 'react-router'

import {
    HttpService,
    getLocalTime,
    Tips,
    browser,
    GetDateStr,
    dateFormat
} from '../Tools'

import Header from './Common/Header'
import DatePicker from 'react-mobile-datepicker'

export default class ScoreDetail extends Component {
    constructor(props) {
        super(props);
        this.timeObj = ''
        this.state = {
            contentNumber: 0,
            isOpen: false,
            value: new Date(GetDateStr(0)),
            min: new Date(GetDateStr(0)),
            max: undefined
        }
    }
    handleClick(e) {
        this.setState({isOpen: true});
    }
    handleCancel() {
        this.setState({isOpen: false});
    }

    handleSelect(value) {
        document.getElementById(this.timeObj).innerHTML = dateFormat(new Date(value), '-', false);
        this.setState({value, isOpen: false});
    }

    //时间限制
    timeSplit(timeObj) {
        this.timeObj = timeObj;
        let value = this.state.value,
            min,
            max,
            timeValue = document.getElementById(timeObj).innerHTML;
        if (timeObj == 'datefrom') {
            min = new Date(GetDateStr(0))
            const dateto = document.getElementById('dateto').innerHTML;
            if (dateto != '') {
                max = new Date(dateto)
            } else {
                max = undefined
            }

        } else {
            const datefrom = document.getElementById('datefrom').innerHTML;
            min = new Date(datefrom)
            max = undefined
        }
        if (timeValue != '')
            value = new Date(timeValue)
        this.setState({isOpen: true, value, min, max});
    }

    //申请请假
    ApplyLeave(e) {
        e.preventDefault();
        const type = this.refs.type.value,
            datefrom = document.getElementById('datefrom').innerHTML,
            dateto = document.getElementById('dateto').innerHTML,
            content = this.refs.content.value;
        if (dateto == '') {
            Tips('请选择结束时间');
            return;
        }
        if (content == '') {
            Tips('请填写请假原因');
            return;
        }
        HttpService.query({
            url: '/jxt-bbzx/SickFormLoggingServlet',
            data: {
                userid: sessionStorage.userid,
                childname: sessionStorage.username,
                schoolid: sessionStorage.orgid,
                classid: this.props.params.id,
                createtime: encodeURIComponent(dateFormat(new Date(), '-').replace(/\-/ig,'.')),
                type,
                datefrom: encodeURIComponent(datefrom),
                dateto: encodeURIComponent(dateto),
                content
            },
            success: (res => {
                if (res.ret == 1) {
                    hashHistory.goBack(-1);
                } else {
                    Tips('申请请假失败');
                }
            })
        })
    }
    /**
     * 计算剩余输入字数
     * @returns {XML}
     */
    changeContentNumber(e) {
        this.setState({contentNumber: e.target.value.length});
    }
    render() {
        const {contentNumber, isOpen, value, min, max} = this.state;
        return (
            <div className='apply_leave'>
                <Header title='请假申请'/>
                <form className="apply_leave_list" onSubmit={this.ApplyLeave.bind(this)}>
                    <label className="lt_hw_list list_buttom">
                        <span className="title">请假类型</span>
                        <div className="hw_right">
                            <select ref='type' dir="rtl">
                                <option value="事假">事假</option>
                                <option value="病假">病假</option>
                                <option value="其它">其它</option>
                            </select>
                        </div>
                        <span className="input_right_img"/>
                    </label>
                    <div className="lt_hw_list list_buttom" onClick={this.timeSplit.bind(this, 'datefrom')}>
                        <span className="title">开始时间</span>
                        <div className="hw_right">
                            <span className="data_time" id='datefrom'>{dateFormat(new Date(), '-', false)}</span>
                        </div>
                        <span className="input_right_img"/>
                    </div>
                    <div className="lt_hw_list " onClick={this.timeSplit.bind(this, 'dateto')}>
                        <span className="title">结束时间</span>
                        <div className="hw_right">
                            <span className="data_time" id='dateto'></span>
                        </div>
                        <span className="input_right_img"/>
                    </div>
                    <div className="leave_cause lt_hw_content">
                        <span className="title">请假原因</span>
                        <textarea ref='content' cols="30" placeholder="请填写请假原因（50字以内）" maxLength='50' onChange={this.changeContentNumber.bind(this)}/>
                        <div className="remaining_word_count">({contentNumber}/50)</div>
                    </div>
                    {/*<div className="apply_people">审批人：张三老师</div>*/}
                    <input type='submit' className="apply_button block" value='提交申请'/>
                </form>
                <DatePicker theme={browser().ios == true
                    ? 'ios'
                    : 'android'} showFormat="YYYY-MM-DD" value={value} min={min} max={max} isOpen={isOpen} onSelect={this.handleSelect.bind(this)} onCancel={this.handleCancel.bind(this)}/>
            </div>
        )
    }
}
